﻿@page "/dashboard/ecommerce"
@inherits ProComponentBase
@attribute [Authorize]
@inject MasaBlazor MasaBlazor
@inject NavHelper NavHelper;
@using FastWiki.Web.Rcl.Data.Dashboard.ECommerce.Dto
@implements IDisposable

<MRow>
    <MCol Md=3 Sm=12>
        <MCard Height=146>
            <MCardText>
                <MRow Class="max-height" NoGutters>
                    <MCol>
                        <span class="text-btn neutral-lighten-4--text">Congratulations🎉</span>
                        <h5 class="mt-1">$48.9k</h5>
                        <MButton Color="primary" Height=30 Class="white--text text-btn rounded-pill" Style="bottom:16px;position:absolute">View</MButton>
                    </MCol>
                    <MCol>
                        <MImage Src="/img/eCommerce/trophy.png"></MImage>
                    </MCol>
                </MRow>
            </MCardText>
        </MCard>
    </MCol>
    <MCol Md=3 Sm=12>
        <MCard Height=146>
            <MCardText>
                <MRow Class="max-height" NoGutters>
                    <MCol>
                        <span class="text-btn neutral-lighten-4--text">Orders</span>
                        <h5 class="mt-1">$230k</h5>
                    </MCol>
                    <MCol Class="block-center">
                        <MECharts Height=100 Width="@("100%")" Class="mt-1" Option=_orderChart></MECharts>
                    </MCol>
                </MRow>
            </MCardText>
        </MCard>
    </MCol>
    <MCol Md=3 Sm=12>
        <MCard Height=146>
            <MCardText>
                <MRow Class="max-height" NoGutters>
                    <MCol>
                        <span class="text-btn neutral-lighten-4--text">Profit</span>
                        <h5 class="mt-1">$682.5k</h5>
                    </MCol>
                    <MCol Class="block-center">
                        <MECharts Height=100 Width="@("100%")" Class="mt-1" Option=_profitChart></MECharts>
                    </MCol>
                </MRow>
            </MCardText>
        </MCard>
    </MCol>
    <MCol Md=3 Sm=12>
        <MCard Height=146>
            <MCardText>
                <MRow Class="max-height" NoGutters>
                    <MCol>
                        <span class="text-btn neutral-lighten-4--text">Earnings</span>
                        <h5 class="my-1">$9745</h5>
                        <span class="text-caption neutral-lighten-2--text">68% more earning than last month.</span>
                    </MCol>
                    <MCol Class="block-center">
                        <MECharts Height=100 Width="@("100%")" Class="mt-1" Option=_earningsChart></MECharts>
                    </MCol>
                </MRow>
            </MCardText>
        </MCard>
    </MCol>
</MRow>

<MRow>
    <MCol Md=8 Sm=12>
        <MRow NoGutters Class="max-height">
            <MCol Md=8 Sm=12>
                <MCard Class="max-height" Style="border-radius:20px 0px 0px 20px !important;">
                    <MCardText>
                        <MECharts Height=326 Width="@("100%")" Option=_revenueReportChart></MECharts>
                    </MCardText>
                </MCard>
            </MCol>
            <MCol Md=4 Sm=12>
                <MCard Class="max-height" Style="box-shadow: -1px 0px 0px rgba(67, 24, 255, 0.1) !important;border-radius: 0px 20px 20px 0px !important;">
                    <MCardText>
                        <div class="block-between">
                            <h4 class="neutral--text">$25,852</h4>
                            <span class="text-caption sample-green--text">
                                <MIcon Size=15 Color="sample-green">mdi-menu-up</MIcon>
                                +2.45%
                            </span>
                        </div>
                        <div class="sample-green--text text-btn mt-1">
                            <MAvatar Color="sample-green" Size=16>
                                <MIcon Size=7 Class="white--text">mdi-check</MIcon>
                            </MAvatar>
                            <span>Budget:56,800</span>
                        </div>
                        <div class="mt-5" style="height:200px;">
                            <MECharts Height=200 Width="@("100%")" Option=_budgetChart></MECharts>
                        </div>
                        <MButton Color="primary" Height=30 Class="white--text text-btn rounded-pill" Style="bottom:24px;right:24px;position:absolute">View all</MButton>
                    </MCardText>
                </MCard>
            </MCol>
        </MRow>
    </MCol>
    <MCol Md=4 Sm=12>
        <MCard>
            <MCardText Class="pb-0">
                <div class="block-between mb-4">
                    <h6>Statistics</h6>
                    <span class="text-btn neutral-lighten-2--text">Updated 1 month ago</span>
                </div>
                <MRow NoGutters>
                    <MCol Md=6 Sm=12 Class="py-12">
                        <div class="d-flex block-center">
                            <MAvatar Size=56 Color="fill-lighten-1">
                                <MIcon Color="sample-green" Size=27>mdi-trending-up</MIcon>
                            </MAvatar>
                            <div class="ml-3">
                                <div class="text-btn neutral-lighten-4--text">Sales</div>
                                <h6>8.504K</h6>
                            </div>
                        </div>
                    </MCol>
                    <MCol Md=6 Sm=12 Class="py-12">
                        <div class="d-flex block-center">
                            <MAvatar Size=56 Color="fill-lighten-1">
                                <MIcon Color="dark-yellow" Size=25>fa:far fa-user</MIcon>
                            </MAvatar>
                            <div class="ml-3">
                                <div class="text-btn neutral-lighten-4--text">User</div>
                                <h6>$35040</h6>
                            </div>
                        </div>
                    </MCol>
                    <MCol Md=6 Sm=12 Class="py-12">
                        <div class="d-flex block-center">
                            <MAvatar Size=56 Color="fill-lighten-1">
                                <MIcon Color="error" Size=27>mdi-cube-outline</MIcon>
                            </MAvatar>
                            <div class="ml-3">
                                <div class="text-btn neutral-lighten-4--text">Products</div>
                                <h6>323.5K</h6>
                            </div>
                        </div>
                    </MCol>
                    <MCol Md=6 Sm=12 Class="py-12">
                        <div class="d-flex block-center">
                            <MAvatar Size=56 Color="fill-lighten-1">
                                <MIcon Color="primary" Size=27>mdi-currency-usd</MIcon>
                            </MAvatar>
                            <div class="ml-3">
                                <div class="text-btn neutral-lighten-4--text">Revenue</div>
                                <h6>$35040</h6>
                            </div>
                        </div>
                    </MCol>
                </MRow>
            </MCardText>
        </MCard>
    </MCol>
</MRow>

<MRow>
    <MCol Md=8 Sm=12>
        <MCard Class="max-height">
            <MDataTable Headers="_headers"
                        TItem="CompanyDto"
                        Items="_companyList"
                        HideDefaultFooter
                        Class="table-border-none pt-2">
                <HeaderColContent Context="header">
                    <span class="text-caption neutral-lighten-2--text ml-2">@header.Text</span>
                </HeaderColContent>
                <ItemColContent>
                    @switch (context.Header.Value)
                    {
                        case nameof(CompanyDto.CompanyName):
                            <div Class="py-2 ml-2">
                                <div class="d-flex">
                                    <MAvatar>
                                        <MImage Height=48 MaxWidth=48 Contain src="@context.Item.CompanyIcon"></MImage>
                                    </MAvatar>
                                    <div class="ml-4">
                                        <span class="text-subtitle">@context.Item.CompanyName</span>
                                        <br />
                                        <span class="text-caption">@context.Item.CompanyEmail</span>
                                    </div>
                                </div>
                            </div>
                            break;
                        case nameof(CompanyDto.Category):
                            <span class="text-subtitle">@context.Item.Category</span>
                            break;
                        case nameof(CompanyDto.Views):
                            <span class="text-subtitle">@context.Item.Views</span>
                            <br />
                            <span class="text-caption">@context.Item.ViewTime</span>
                            break;
                        case nameof(CompanyDto.Revenue):
                            <span class="text-subtitle">@context.Item.Revenue</span>
                            break;
                        case nameof(CompanyDto.Sales):
                            <span class="text-subtitle">@context.Item.Sales</span>
                            if (context.Item.Rise)
                            {
                                <MIcon Class="ml-3" Color="green">mdi-trending-up</MIcon>
                            }
                            else
                            {
                                <MIcon Class="ml-3" Color="red">mdi-trending-down</MIcon>
                            }

                            break;
                        default:
                            @context.Value
                            break;
                    }
                </ItemColContent>
            </MDataTable>
        </MCard>
    </MCol>
    <MCol Md=4 Sm=12>
        <MCard Class="max-height">
            <MCardText Class="pt-6">
                <img class="rounded-2 max-width" height=186 src="/img/eCommerce/rectangle.png" />
                <div class="d-flex my-4">
                    <MAvatar Size=48 Color="fill-lighten-1">
                        <MIcon Color="primary" Size=20>fa:far fa-calendar-check</MIcon>
                    </MAvatar>
                    <div class="ml-4">
                        <div class="text-subtitle">Sat，May 25，2021</div>
                        <span class="text-caption">10:AM to 6:PM</span>
                    </div>
                </div>
                <div class="d-flex">
                    <MAvatar Size=48 Color="fill-lighten-1">
                        <MIcon Color="sample-green" Size=25>mdi-map-marker-outline</MIcon>
                    </MAvatar>
                    <div class="ml-4">
                        <div class="text-subtitle">Central Park </div>
                        <span class="text-caption">Manhattan,New york City</span>
                    </div>
                </div>
            </MCardText>
        </MCard>
    </MCol>
</MRow>
